<template>
  <div>
    <van-popup
      v-model="show"
      id="xueba"
      close-icon-position="top-left"
      :close-icon="require('@/img//practice/3.1 返回1.png')"
      closeable
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="SetHead">
        <P @click="curId = 0" :class="{ cur: curId === 0 }">计时器</P>
        <P @click="curId = 1" :class="{ cur: curId === 1 }">计时背景</P>
        <P @click="curId = 2" :class="{ cur: curId === 2 }">白噪音</P>
        <P @click="curId = 3" :class="{ cur: curId === 3 }">头像挂件</P>
      </div>
      <TimerSet v-show="curId === 0" />
      <TimerBack v-show="curId === 1" />
      <WhiteNoise v-show="curId === 2" />
      <Photo v-show="curId === 3" />
    </van-popup>
  </div>
</template>

<script>
import TimerSet from "../../components/practice/Timer-Set.vue";
import TimerBack from "../../components/practice/Timer-back.vue";
import WhiteNoise from "../../components/practice/White-noise.vue";
import Photo from "../../components/practice/Photo.vue";
export default {
  components: { TimerSet, TimerBack, WhiteNoise, Photo },
  name: "BackgroundSet",
  data() {
    return {
      show: false,
      curId: 0,
    };
  },
  mounted() {
    this.$bus.$on("BackgroudSetShow", (SetShow) => {
      this.show = SetShow;
    });
  },
};
</script>

<style>
.SetHead {
  display: flex;
  font-size: 32px;
  justify-content: space-around;
  margin-left: 84px;
  margin-top: 8px;
  color: rgba(190, 190, 190, 100);
}
.cur {
  color: rgba(16, 16, 16, 100);
}
</style>